<template>
    <!-- 菜单弹出框 -->
    <div>
        <el-dialog :title="isAdd ? '添加菜单' : '修改菜单'" :visible="isShow" :before-close="offCheck" center>
            <el-form :model="menuInfo" :rules="rules" label-width="100px" class="demo-ruleForm" ref="menuForm">
                <el-form-item label="菜单名称" prop="title">
                    <el-input v-model="menuInfo.title"></el-input>
                </el-form-item>
                <el-form-item label="上级菜单" prop="pid">
                    <el-select v-model="menuInfo.pid" placeholder="请选择上级菜单" @change="changeType">
                        <el-option label="顶级菜单" :value="0"></el-option>
                        <el-option v-for="item in menuList" :key="item.id" :label="item.title" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型">
                    <el-radio v-model="menuInfo.type" :label="1" disabled>目录</el-radio>
                    <el-radio v-model="menuInfo.type" :label="2" disabled>菜单</el-radio>
                </el-form-item>
                <el-form-item label="菜单地址" v-if="menuInfo.type == 2">
                    <el-input v-model="menuInfo.url"></el-input>
                </el-form-item>
                <el-form-item label="菜单图标" v-else>
                    <el-input v-model="menuInfo.icon"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="menuInfo.status" active-color="#13ce66" inactive-color="#ccc" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="offCheck">取 消</el-button>
                <el-button type="primary" @click="addMenu">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
//引入封装好的接口
import { menuAdd, menuInfo, menuEdit, menuList } from "../../request/api";
//引入辅助性函数
import { mapGetters, mapActions } from "vuex";
export default {
    computed: {
        ...mapGetters({
            menuList: "menu/getMenuList"
        })
    },
    // 接受参数
    props: ["isShow", "isAdd", "editId"],
    data() {
        return {
            menuInfo: {
                pid: 0,
                title: "",
                icon: "",
                type: 1,
                url: "",
                status: 1,
            },
            rules: {
                title: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],
                pid: [
                    { required: true, message: '请输入上级菜单', trigger: 'blur' },
                ]
            },
        };
    },
    methods: {
        // 改变菜单类型的状态与菜单列表一致
        changeType(e) {
            this.menuInfo.type = e == 0 ? 1 : 2
        },
        //获取菜单列表
        ...mapActions({
            getMenuList: "menu/menuList_Action"
        }),
        //点击取消
        offCheck() {
            // 子传父
            this.$emit("offCheck", false)
            // 清空表单信息
            this.$refs.menuForm.resetFields()
            this.menuInfo = {
                pid: 0,
                title: "",
                icon: "",
                type: 1,
                url: "",
                status: 1
            }
        },
        // 点击查看一条菜单数据
        getOneMenu(id) {
            // 调用获取一条数据接口
            menuInfo({ id }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    // 实现数据回显
                    this.menuInfo = res.list
                    this.menuInfo.id = id
                }
            })
        },
        //点击确定
        addMenu() {
            this.$refs.menuForm.validate(flag => {
                if (flag) {
                    // 判断是添加还是编辑
                    if (this.isAdd) {
                        //调用添加接口
                        menuAdd(this.menuInfo).then(res => {
                            console.log(res);
                            if (res.code == 200) {
                                //关闭菜单弹框
                                this.offCheck()
                                this.$message.success(res.msg);
                                //重新触发行动渲染
                                this.getMenuList()
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    } else {
                        // 调用菜单编辑接口
                        menuEdit(this.menuInfo).then(res => {
                            console.log(res);
                            if (res.code == 200) {
                                //关闭菜单弹框
                                this.offCheck()
                                this.$message.success(res.msg);
                                //重新触发行动渲染
                                this.getMenuList()
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    }
                } else {
                    this.$message.error("请输入正确的内容");
                }
            })
        }
    }
};
</script>

<style scoped>
</style>
